<template>
  <div class="groupNewsBox">
    <el-row class="top">
      <el-col :span="6" class="top-col">
        <el-input
          placeholder="请输入内容"
          v-model="field"
          clearable
          class="searchInput"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="search"
          ></el-button>
        </el-input>
      </el-col>
      <el-col :span="12" class="top-col">
        <el-radio-group v-model="selectRadio" @change="screen">
          <el-radio-button label="全部"></el-radio-button>
          <el-radio-button label="已发布"></el-radio-button>
          <el-radio-button label="待发布"></el-radio-button>
        </el-radio-group>
      </el-col>
      <!-- el-icon-s-check -->
      <el-col :span="6" class="top-col">
        <div class="sortAndBtn">
          <span class="sort-text" @click="batchRelease"
            ><i class="el-icon-s-check"></i> 批量发布</span
          >
          <el-button type="primary" class="addBtn" @click="addNews"
            >+新增集团新闻</el-button
          >
        </div>
      </el-col>
    </el-row>
    <el-row class="table">
      <el-table
        :data="newsData"
        style="width: 100%"
        @select="select"
        ref="newsTable"
      >
        <el-table-column
          type="selection"
          width="80"
          label="releaseStatus"
        ></el-table-column>
        <el-table-column prop="newsId" label="ID" width="80"></el-table-column>
        <el-table-column prop="title" label="文章标题" width="180">
        </el-table-column>
        <el-table-column prop="updateTime" label="更新时间">
          <template slot-scope="{ row }">
            {{ row.updateTime | formatTime("yy-mm-dd,hh:mm") }}
          </template>
        </el-table-column>
        <el-table-column prop="numberHits" label="点击数"> </el-table-column>
        <el-table-column prop="releaseStatus" label="发布状态">
          <template slot-scope="{ row }">
            {{ row.releaseStatus == 1 ? "已发布" : "待发布" }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <div class="operation">
              <span
                @click="changeNews(row, 'release')"
                :class="row.releaseStatus == 1 ? 'info' : ''"
                >发布</span
              >
              |
              <span
                @click="changeNews(row, 'off')"
                :class="row.releaseStatus == 1 ? '' : 'info'"
                >撤回</span
              >
              | <span @click="changeNews(row, 'edit')">编辑</span> |
              <span @click="changeNews(row, 'del')">删除</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row class="pagintaion-row">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.currentPage"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="params.size"
        layout=" prev, pager, next,sizes, jumper"
        :total="total"
      >
      </el-pagination>
    </el-row>
  </div>
</template>
<script>
import { mapMutations, mapGetters } from 'vuex'
export default {
  mounted () {
    this.getData()
    this.newsSelect = this.getNewsSelect ? this.getNewsSelect : []
    this.newsSelect.map(item => this.$refs['newsTable'].toggleRowSelection(this.newsData.find(cur => item.newsId == cur.newsId)))
  },
  data () {
    return {
      //请求参数
      params: {
        field: '',
        currentPage: 1,
        size: 5,
        releaseStatus: 0
      },
      isSearch: '',
      selectRadio: '全部',
      //新闻列表
      newsData: [
        {
          newsId: 1,
          title: '11111',
          updateTime: new Date(),
          numberHits: '',
          releaseStatus: '',
          description: '',
          Top: 1,
          author: '',
          content: '',
          keywords: ''
        },
        {
          newsId: 2,
          title: '11111',
          updateTime: new Date(),
          numberHits: '',
          releaseStatus: '',
          description: '',
          Top: 1,
          author: '',
          content: '',
          keywords: ''
        }, {
          newsId: 3,
          title: '11111',
          updateTime: new Date(),
          numberHits: '',
          releaseStatus: '',
          description: '',
          Top: 1,
          author: '',
          content: '',
          keywords: ''
        }
      ],
      field: '',
      total: 3,
      newsSelect: []
    }
  },
  methods: {
    ...mapMutations(['setNewsType', 'setNewsData', 'setNewsSelect']),
    //搜索
    search () {
      this.isSearch = this.field
      this.params.field = this.field
      this.getData()
    },
    select (selection) {
      this.newsSelect = selection
      this.setNewsSelect(this.newsSelect)
    },
    //批量发布
    async batchRelease () {
      const flag = await this.$confirm('是否批量发布？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => { })
      if (!flag) return this.$message('取消批量发布');
      const release = this.newsSelect.map(item => item.newsId)
      if (release.length <= 0) return this.$message.warning('请选择要发布的内容')
      const { meta: { status, msg } } = await this.$http.batchRelease(release)
      // console.log(status)
      if (status != 200) return this.$message.error('批量发布失败')
      this.$message.success('批量发布成功')
      this.getData()
    },
    //筛选
    screen () {
      this.params.currentPage = 1
      this.params.releaseStatus = this.selectRadio == '已发布' ? 1 : this.selectRadio == '待发布' ? 2 : 0
      this.getData()
    },
    //添加新闻
    addNews () {
      this.setNewsType('add')
      this.$router.push({
        path: '/groupNews/addNews'
      })
    },
    //操作
    async changeNews (row, type) {
      if (type == 'edit') {
        //修改
        this.setNewsType('edit')
        this.setNewsData(row)
        this.$router.push({
          path: '/groupNews/editNews'
        })
      } else if (type == 'release' || type == 'off') {
        //发布与撤回
        // console.log(row.releaseStatus, type)
        if (row.releaseStatus == 0 && type !== 'release') return
        if (row.releaseStatus == 1 && type !== 'off') return
        const flag = await this.$confirm(`是否${row.releaseStatus ? '撤回' : '发布'}？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err => { })
        if (!flag) return this.$message(`取消${row.releaseStatus ? '撤回' : '发布'}操作`);
        const params = { ...row, releaseStatus: row.releaseStatus ? 0 : 1 }
        const { meta: { status, msg } } = await this.$http.editNews(params)
        if (status != 200) return this.$message.error(`${row.releaseStatus ? '撤回' : '发布'}失败`)
        this.$message.success(`${row.releaseStatus ? '撤回' : '发布'}成功`)
        this.getData()
      } else if (type == 'del') {
        //删除
        const flag = await this.$confirm('是否删除该条？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err => { })
        if (!flag) return this.$message('取消删除');
        const { meta: { status, msg } } = await this.$http.delNews({ newsId: row.newsId })
        if (status != 200) return this.$message.error('删除失败')
        this.$message.success('删除成功')
        this.getData()
      }
    },
    //改变每页显示的条数
    handleSizeChange (pagesize) {
      this.params.size = pagesize
      this.getData()
    },
    //改变页码
    handleCurrentChange (pagenum) {
      this.params.currentPage = pagenum
      this.getData()
    },
    async getData () {
      const { data: { data }, meta: { msg, status }, parameters } = await this.$http.getNews(this.params)
      // console.log(status)
      // console.log(data)
      if (status != 200) return this.$message.error('获取数据失败')
      this.newsData = data
      this.total = parameters.totalElement
    }
  },
  computed: {
    ...mapGetters(['getNewsSelect'])
  },
  watch: {
    field (newVal, oldVal) {
      this.params.field = this.isSearch ? newVal != oldVal ? this.isSearch : newVal : ''
    }
  }
}
</script>
<style scoped lang="less">
.groupNewsBox {
  width: 100%;
  height: 100%;
  min-width: 1200px;
  .top {
    height: 40px;
    .top-col {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .el-radio-group {
        height: 100%;
        display: flex;
        align-items: center;
      }
      .searchInput {
        width: 80%;
      }
      .sortAndBtn {
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 14px;
        .sort-text {
          color: #108ee9;
          cursor: pointer;
        }
        .addBtn {
          margin-left: 10px;
        }
      }
    }
  }
  .table {
    margin: 10px 30px;
    /deep/ .el-table {
      .el-table__cell {
        text-align: center;
        .cell {
          .operation {
            color: #d7d7d7;
            span {
              color: #1890ff;
              cursor: pointer;
              margin: 0 3px;
            }
            span.info {
              color: #d7d7d7;
            }
          }
        }
      }
    }
  }
  .pagintaion-row {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
}
</style>